// 首页需要渲染基本的网页入口和脚本加载信息
class FirstPage{
    static getFirstPageIns() {
        let fp = new FirstPage();
        fp.loadBingImgJson().then(() => {
            fp.setBg();
        });
        return fp;
    }
    _createDom(name,styles,classNames) {
        let dom = document.createElement(name);
        for (let i in styles) {
            dom.style[i] = styles[i];
        }
        dom.classList.add(classNames)
        return dom;
    }
    constructor() {
        this.timer = null
        this.images = [];
        this.topDiv = null;
        this.imageDiv = null;
        this.copyDiv = null;
        this.dbClickHiddenDom = [];
        this._init();
    }
    show() {
        this.topDiv.style.opacity = 1;
        this.topDiv.style.zIndex = 20;
    }
    hide() {
        this.topDiv.style.opacity = 0;
        this.topDiv.style.zIndex = 0;
    }
    _init() {
        this.topDiv = this._createDom('div',{width: '100vw',height: '100vh',position: 'absolute', zIndex: 0,opacity:0},['topDiv']);
        this.imageDiv = this._createDom('div',{width: '100vw',height: '100vh',position: 'absolute',zIndex: 11});
        this.copyDiv = this._createDom('div',{bottom:'5px',right: '5px',position: 'absolute', zIndex: 12});
        this.topDiv.append(this.imageDiv);
        this.topDiv.append(this.copyDiv);
        document.body.append(this.topDiv);
        this.topDiv.ondblclick = () => {
            this.hidePlus = !this.hidePlus;
            if (this.hidePlus) {
                this.dbClickHiddenDom.forEach(dom => dom.style.opacity = 0);
            } else {
                this.dbClickHiddenDom.forEach(dom => dom.style.opacity = 1);
            }
        };
        this.dbClickHiddenDom.push(this.copyDiv);
    }
    loadBingImgJson() {
        return Requests.getBingImage()
            .then(_ => {
                this.images = _;
                return _;
            });
    }
    setBg(ind) {
        if (typeof ind !== "number") {
            // ind = parseInt(Math.random() * this.images.length);
            ind = 0;
        }
        this.imageDiv.style.background = `url('${this.images[ind].url}')`;
        this.imageDiv.style.backgroundSize = 'cover';
        this.copyDiv.innerHTML = `<a style="color: black;outline: none;text-decoration: none;" href="${this.images[ind].copyrightlink}">${this.images[ind].copyright}</a>`;
    }
}
